<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素具备边框以外的距离  四个 上下左右
		 margin外边距属性：1个属性值 
		 外边距问题1：行内元素：a  、i，delete..只支持左右边框
		            布局：支持左右推动效果
					解决方案：行转块
		 */
		 span{
			 width: 50%;
			 border: 1px solid palevioletred;
			 /*  margin外边距属性：1个属性值 */
			 margin: 300px;    /* ？  上下   左右     上下没有效果  ？ */
			  /*  margin外边距属性：2个属性值 ：上下  左右 */
			margin: 100px 200px;
			/* margin外边距属性:3个属性值: 上  右左  下*/
			margin: 100px 200px 300px;
			/* margin外边距属性:4个属性值: 上  右  下  左*/
			margin: 100px 200px 300px 400px;
			/* 常用属性：自适应居中 */
			margin:auto;
			margin-left:800px ;
		 }
		 /* 外边距问题2：外边距合并问题 
		 上下元素都存在外边距 垂直以最大外边距值为主
		 外边距垂直合并 最大外边距为主 怎末解决
		 推荐1.margin 设置一个值 上下会垂直 去掉一个上下元素其中上下外边距 0重新计算
		     2.padding代替margin
		 */
		 h1{
			 border: 1px solid hotpink;
			 margin:300px;
			 
		 }
		 
		 #parent{
			 overflow: hidden;
			border: 1px solid transparent;
			 width: 200px;
			 height: 200px;
			 background: skyblue;
			
		 }
		 #child{
			 margin-left: 50px;
			margin-top: 50px;
			 width: 100px;
			 height: 100px;
			 background:orchid;
		 }
		</style>
	</head>
	<body>
		<h1>外边距合并问题</h1>
		<div id="parent">
		<div id="child"></div>
		</div>
		<!-- 元素：存在于框模型=外边框+边框+内边距+内容
		 有些元素默认外边距 处理方案：通配选择器  去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
	</body>
</html>